import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Layout } from 'element-react';
import API from './api'

import './muiscDetail.css'

class MuiscDetail extends Component {
  state = {
    id: null,
    musicDetail: [],
    tracks: []
  };
  render() {
    let { musicDetail, tracks,id } = this.state;
    return (
      <div className="geidan" key={this.props.location.key}>
        {/* 歌单详情 */}
        <Layout.Row className='container gd-header'>
          <Layout.Col span="6">
            <img src={musicDetail.coverImgUrl} alt="" className="fengmian" />
          </Layout.Col>
          <Layout.Col span="16" offset="2">
            <h3 className="color-orage" style={{ paddingTop: 30 }}>{musicDetail.name}</h3>
            <h5>{musicDetail.tags}</h5>
            <p className="color-gray">{musicDetail.description}</p>
          </Layout.Col>
        </Layout.Row>
        {/* 歌单音乐列表 */}

        <Layout.Row className='container gd-list'>
          {

            tracks.map((item, index) => {
              return (
                <Layout.Col key={item.id} span="8">
                  <Link to={`/musicPlay/${item.id}`}>
                    <div className="media clearfix">
                      <div className="media-left fl">
                        <img src={item.al.picUrl} alt="" />
                      </div>
                      <div className="media-right">
                        <h4>{item.name}</h4>
                        <h6 className="color-gray">{item.ar[0].name}</h6>
                      </div>
                    </div>
                  </Link>
                </Layout.Col>)
            })
          }

        </Layout.Row>
      </div>
    );
  }

  initData = async id => {
    const { musicDetail, tracks } = this.state;
    let rs = await API.getMuiscDetailData(id).then(r => {
      this.setState({
        musicDetail: r.playlist,
        tracks: r.playlist.tracks
      })
    });

  }
  // 组件加载完毕
  componentDidMount() {
    var that = this;
    this.setState({
      id: this.props.match.params.id,
    },r=>{
      var id = this.state.id;
        that.initData(id);
    })
    
  }
  componentWillUnmount() {
    console.log('详情页销毁了')
    // 卸载异步操作设置状态
    this.setState = (state, callback) => {
      return;
    }
  }
}
export default MuiscDetail;
